<template>
  <div class="p_20">
    <!-- <div class="flex justify_content_between">
      <el-button size="small" type="primary" v-if="isRole(['Admin/add'])" @click="add">创建</el-button>
    </div> -->
	
	<div class="flex justify_content_between align_items_center  content-wrapper p_lr_20 m_b_20">
		<div class="flex align_items_center">
			<h2>用户管理</h2>
			<div class="p_l_20">
				<el-button size="small" type="primary"  v-if="isRole(['Role/addRole'])"  @click="add">创建用户</el-button>
			</div>
		</div>
	</div>

    <!-- <el-divider></el-divider> -->

    <!-- -项目列表- -->
		<div class="content-wrapper p_20">
    <el-table :data='tableData' width='100%' border>
      <el-table-column label='创建时间' prop='create_time'>
        <template slot-scope="scope">
          {{scope.row.created_at|format}}
        </template>
      </el-table-column>
      <el-table-column label='姓名' prop='realname'></el-table-column>
      <el-table-column label='账号' prop='username'></el-table-column>
      <el-table-column label='权限' prop='role_name'></el-table-column>
      <el-table-column label='状态' prop='state'>
        <template slot-scope="scope">
          {{scope.row.state == 0 ?'禁用':'正常'}}
        </template>
      </el-table-column>
      <el-table-column label='操作' width="260">
        <template slot-scope="scope">
          <el-button size="small" v-if="isRole(['Admin/editor'])" @click="edit(scope.row)">编辑</el-button>
          <el-button size="small" v-if="isRole(['Admin/delete'])" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page ref="Page" :total="total"></page>
	<Edit ref="Edit"></Edit>
	</div>
  </div>
</template>
<script type="text/javascript">
  import methods from './method'
  import data from './data'
  import Edit from '../edit/edit.vue'

  export default {
    data() {
      return data.init()
    },
    methods: methods,
	components:{
		Edit
	},
    mounted() {
      this.getTableData()
    }
  }
</script>
